<!--
 * @Author: YourName
 * @Date: 2024-05-14 13:32:47
 * @LastEditTime: 2024-05-16 10:28:59
 * @LastEditors: YourName
 * @Description: 
 * @FilePath: \冲锋号影视\src\views\PictureAdmin\index.vue
 * 版权声明
-->
<script lang="ts" setup>
import { ref, reactive, watch, defineExpose } from 'vue'
import 'dayjs/locale/zh-cn'
import { onMounted, computed } from 'vue';
import { getMediaPage } from '@/apis/uploadApi'
import { DeleteFilled, Plus, MoreFilled, More, CircleCloseFilled } from '@element-plus/icons-vue'
import { getpicturecalssList, pictureClasscreate, DeletepictureClass, pictureClassUploude, pictureClass } from '@/apis/pictureclass'
import { getParticulars, deleteParticulars, updatePicture, establishPicture } from '@/apis/picture'
// 在您的组件脚本中
import { resourCeList } from '@/apis/resource'
import { View } from '@element-plus/icons-vue'
import MyImageComponent from '@/views/PictureAdmin/compomemts/ImageComponent.vue'
import MyVideoComponent from '@/views/PictureAdmin/compomemts/VdideoComponent.vue'
import MyTextComponent from '@/views/PictureAdmin/compomemts/TextComponent.vue'
import { PhotoPage } from '@/apis/cameraman'
import { Action, ElMessage, ElMessageBox } from 'element-plus'
import { number } from 'echarts';
let dataImageList = ref([])
let dataVideoList = ref([])
const formRef1 = ref(null)
const activeIndex = ref('1')
let updateTitle = ref('')
let imageList = ref([])
let addImageId = ref([])
let SearchName = ref('')
let eventName = ref('')
let classId = ref('')
let allorSomePicture = ref('')
let allorSomeData = ref({})
let allorSomePage = ref('1')
let everyclick = ref('')
let mediaIdsList = ref([])
let typeArry = ref([])
let title3 = ref('新建相册')
let title1 = ref('添加相册分类')
let dialogFormVisible4 = ref(false)
let totals1 = ref()
let formdata = reactive({
    name: '',
    sort: '',
    enable: '',
    type: ''
})
// 本来
let selectedResources = ref([]);
let dialogFormVisible = ref(false)
let compile = ref('')
let CameramanList = ref([])
let ClassList = reactive([])
let dialogFormVisible1 = ref(false)
let dialogFormVisible5 = ref(false)
const value = ref(false)
let dialogFormVisible2 = ref(false)
let dialogFormVisible3 = ref(false)
let updateList = ref([])
let imageList1 = ref([])
let imageSrc = ref('')
let options = ref([])
let activeName = ref('picture')
let uniqueArray = ref([])
let lexingid = ref('')
let options1 = ref([])
let leixing = ref([])
let mediumType = ref(false)
let surfacePlot = ref('')
let leixing1 = ref([])
let paging = ref('')
let Orupdate = ref('')
let pictureclass = ref('')
let AddalbumTypeId = ref('')
let cameramanListImage = ref([])
let title = ref('')
interface Tree {
    label: string
    children?: Tree[]
}
let treeList = ref([])
const ruleFormRef = ref(null)
const formRef = ref(null)
let totals = ref(null)
let Viewdata = reactive({
    description: '',
    photographerName: '',
    createTime: '',
    mediaType: ''
})
const form = reactive({
    title: '',
    albumTypeId: '',
    description: '',
    banner: '',
    authors: [],
    enable: '',
    recommend: ''
})
let isSubmitDisabled = computed(() => {
    return Textmian.title === '' && Textmian.textmian === '';
})
let Textmian = reactive({
    title: '',
    textmian: '',
    mediaType: 'text/plain'
})
let Text = reactive({})
let options2 = [
    {
        value: true,
        label: '是'
    },
    {
        value: false,
        label: '否'
    }
]
let options3 = [
    {
        value: true,
        label: '是'
    },
    {
        value: false,
        label: '否'
    }
]
let options4 = [
    {
        value: true,
        label: '是'
    },
    {
        value: false,
        label: '否'
    }
]
// 添加文本组件的表单校验
const rules1 = ref({
    title: [{ required: true, message: '文本标题是必填项', trigger: 'blur' }],
    textmian: [
        {
            required: true, message: '文本标题是必填项', trigger: 'blur'
        }
    ]
})

// 校验规则
const rules = ref({
    title: [
        { required: true, message: '相册名称是必填项', trigger: 'blur' }
    ],
    albumTypeId: [
        { required: true, message: '相册类型是必填项', trigger: 'change' }
    ],
    authors: [
        { required: true, message: '作者姓名是必填项', trigger: 'change' }
    ],
    description: [
        { required: true, message: '相册描述是必填项', trigger: 'blur' },
        { max: 70, message: '相册描述最多70个字', trigger: 'blur' },
    ],
    enable: [
        { required: true, message: '是否启用是必选项', trigger: 'blur' }
    ],
    recommend: [
        { required: true, message: '是否推荐是必选项', trigger: 'blur' }
    ],
    banner: [
        { required: true, message: '是否轮播是必选项', trigger: 'change' },
    ],
    // 其他规则...
});
// 本来
const options5 = [
    {
        value: '是',
        label: '是',
    },
    {
        value: '否',
        label: '否',
    },
]

const options6 = [
    {
        value: '0',
        label: '图片',
    },
    {
        value: '1',
        label: '视频',
    },
    {
        value: '2',
        label: '其它类型'
    }
]
// 校验规则
const rules2 = ref({
    name: [
        { required: true, message: '相册分类名称是必填项', trigger: 'blur' },
    ],
    sort: [
        { required: true, message: '相册类型中的排序是必填项', trigger: 'blur' },
    ],
    enable: [
        { required: true, message: '是否启用是必选项', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '媒体类型是必选项', trigger: 'blur' },
    ],
});
onMounted(classList)
// 获取相册分类
async function classList() {
    dataImageList.value = []
    dataVideoList.value = []
    const res = await getpicturecalssList();
    leixing.value = res.data
    console.log(res.data);
    for (let i = 0; i < res.data.length; i++) {
        const item = res.data[i]; // 正确获取当前遍历到的项
        if (item.type === 0) { // 使用 item.type 而不是 res.data[i].type
            dataImageList.value.push(item);
        } else if (item.type === 1) {
            dataVideoList.value.push(item);
        }
    }
}

const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

function handleSizeChange(val: number) {
    console.log(`${val} items per page`)
}
// async function handleCurrentChange(val) {
//     const res = await getMediaPage({
//         "pageNo": val,
//         "pageSize": 6
//     })
//     imageList1.value = res.data.list
// }
// 添加图片相册分类按钮
async function addClassImage() {
    dialogFormVisible4.value = true
    mediumType.value = false
    title1.value = '添加图片相册分类'
    formdata.name = ''
    formdata.sort = ''
    formdata.enable = ''
    formdata.type = '0'

}
// 添加视频相册分类按钮
async function addClassVideo() {
    dialogFormVisible4.value = true
    title1.value = '添加视频相册分类'
    formdata.name = ''
    mediumType.value = false
    formdata.sort = ''
    formdata.enable = ''
    formdata.type = '1'
}
// 提交事件
async function addclassify() {
    console.log('kankan', formdata.enable);
    if (title1.value === '添加图片相册分类' || title1.value === '添加视频相册分类') {
        const res = await pictureClasscreate({
            "name": formdata.name,
            "sort": formdata.sort,
            "enable": formdata.enable == '是' ? true : false,
            "type": formdata.type
        })
        dialogFormVisible4.value = false
        formdata.name = ''
        formdata.sort = ''
        formdata.enable = ''
        if (res.code == 0) {
            ElMessage.success('添加相册分类成功')
            classList()
        } else {
            ElMessage.error(res.msg)
        }
    } else {
        const res = await pictureClassUploude({
            "id": classId.value,
            "name": formdata.name,
            "sort": formdata.sort,
            "enable": formdata.enable == '是' ? true : false,
            "type": formdata.type == '图片' ? 0 : 1
        })
        dialogFormVisible4.value = false
        formdata.name = ''
        formdata.sort = ''
        formdata.enable = ''
        if (res.code == 0) {
            ElMessage.success('修改相册分类成功')
            classList()
        } else {
            ElMessage.error(res.msg)
        }
    }
}
// 删除相册分类按钮
async function deleteClass(item) {
    ElMessageBox.confirm(
        '确定要删除该分类吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            if (imageList1.value.length !== 0) {
                ElMessage.error('无法删除该相册分类，这个分类下面还有其它资源')
            } else {
                const res = await DeletepictureClass(item.id)
                if (res.code == 0) {
                    ElMessage.success('删除相册分类成功')
                    classList()
                } else {
                    ElMessage.error(res.msg)
                }
            }

            // window.location.reload();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}

// 修改相册分类
async function uploudeClass(item) {
    console.log(item.enable);
    title1.value = '修改相册分类';
    mediumType.value = true
    classId.value = item.id;
    dialogFormVisible4.value = true; // 打开对话框
    formdata.name = item.name
    formdata.sort = item.sort
    formdata.enable = item.enable == true ? '是' : '否'
    formdata.type = item.type == 0 ? '图片' : 1 ? '视频' : '其它类型'
}
// 取消点击事件
function cancel() {
    dialogFormVisible4.value = false
    formdata.name = ''
    formdata.sort = ''
    formdata.enable = ''
}

// 重置表单数据的方法
function resetForm(done) {
    formdata.name = ''
    formdata.sort = ''
    formdata.enable = ''
    title1.value = ''
    mediumType.value = false
    done(); // 如果需要关闭对话框，调用 done 函数
}


// 修改相册按钮
async function toParticulars(item) {
    Orupdate.value = 'update'
    const res = await getParticulars(item.id)
    updateTitle.value = res.data.title
    selectedResources.value = JSON.parse(res.data.content)
    form.title = res.data.title
    form.albumTypeId = res.data.albumTypeId
    form.description = res.data.description
    form.authors = uniqueArray.value
    imageSrc.value = res.data.coverUrl
    form.banner = res.data.banner
    form.enable = res.data.enable
    form.recommend = res.data.recommend
    mediaIdsList.value = res.data.mediaIds
    AddalbumTypeId.value = res.data.id
    dialogFormVisible5.value = true
    title3.value = '修改相册'
    await textProps('3')
    if (uniqueArray.value.length === 0) {
        res.data.authors.forEach(id => {
            const match = CameramanList.value.find(item => item.id === id);
            uniqueArray.value.push(match.name)
        })
    }
}
// 删除相册
// console.log('看看', item);
//     const res = await deleteParticulars(item.id)
//     if (res.code == 0) {
//         handleCurrentChange1(1)
//         ElMessage.success('删除相册成功')
//     } else {
//         ElMessage.error(res.msg)
//     }
async function toDeleteFilled(item) {
    ElMessageBox.confirm(
        '确定要删除该相册吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await deleteParticulars(item.id)
            if (res.code == 0) {
                ElMessage.success('删除相册成功')
                handleCurrentChange1(1)
            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消操作')
        })
    // window.location.reload();
}

onMounted(
    getPhotoPage
)
onMounted(SearchImage)
// 获取树状数据
onMounted(async () => {
    const res = await resourCeList();
    treeList.value = buildTree(res.data);
    updateList.value = res.data// 使用 map 方法转换数组
    options.value = updateList.value.map(item => {
        return {
            value: item.id, // 使用 item.id 作为 value
            label: item.name // 使用 item.name 作为 label
        };
    });
});
// 树状结构方法
function buildTree(data, parentId = 0) {
    const tree = [];
    data.forEach((item) => {
        if (item.superId === parentId) {
            const children = buildTree(data, item.id); // 递归调用构建子树
            tree.push({
                label: item.name,
                children: children.length ? children : null, // 如果有子节点，则添加子节点数组
                id: item.id
            });
        }
    });
    return tree;
}
// 点击选择图片按钮
async function selectImage() {
    allorSomePicture.value = 'all'
    compile.value = '2'
    dialogFormVisible.value = true
    title.value = '请选择图片资源'
    const res = await getMediaPage({
        "pageNo": 1,
        "pageSize": 8,
        "mediaType": "image"
    })
    imageList.value = res.data.list
    totals = Number(res.data.total)
    for (let i = 0; i < imageList.value.length; i++) {
        // 将时间戳转换为Date对象
        const date = new Date(imageList.value[i].createTime)

        // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
        const year = date.getFullYear(); // 获取四位数的年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
        const day = date.getDate().toString().padStart(2, '0'); // 获取日

        // 组合成YYYY-MM-DD格式
        const formattedDate = `${year}-${month}-${day}`;
        imageList.value[i].createTime = formattedDate
    }
}
async function selectVideo() {
    allorSomePicture.value = 'all'
    compile.value = '3'
    dialogFormVisible.value = true
    title.value = '请选择视频资源'
    const res = await getMediaPage({
        "pageNo": 1,
        "pageSize": 8,
        "mediaType": "video"
    })
    console.log(res);
    imageList.value = res.data.list
    totals = Number(res.data.total)
    for (let i = 0; i < imageList.value.length; i++) {
        // 将时间戳转换为Date对象
        const date = new Date(imageList.value[i].createTime)

        // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
        const year = date.getFullYear(); // 获取四位数的年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
        const day = date.getDate().toString().padStart(2, '0'); // 获取日

        // 组合成YYYY-MM-DD格式
        const formattedDate = `${year}-${month}-${day}`;
        imageList.value[i].createTime = formattedDate
    }
}
// 点击编辑按钮
async function getcompile() {
    allorSomePicture.value = 'all'
    dialogFormVisible.value = true
    compile.value = '1'
    title.value = '请选择封面图片'
    const res = await getMediaPage({
        "pageNo": 1,
        "pageSize": 8,
        "mediaType": "image"
    })
    console.log(res);
    imageList.value = res.data.list
    totals = Number(res.data.total)
    for (let i = 0; i < imageList.value.length; i++) {
        // 将时间戳转换为Date对象
        const date = new Date(imageList.value[i].createTime)

        // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
        const year = date.getFullYear(); // 获取四位数的年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
        const day = date.getDate().toString().padStart(2, '0'); // 获取日

        // 组合成YYYY-MM-DD格式
        const formattedDate = `${year}-${month}-${day}`;
        imageList.value[i].createTime = formattedDate
    }
}
// 获得图片资源
async function handleNodeClick(data: Tree) {
    allorSomePage.value = '1';
    allorSomePicture.value = 'some'
    allorSomeData.value = data
    totals = (null)
    allorSomePage.value = '1'
    if (title.value == '请选择图片资源' || title.value == '请选择封面图片') {
        const res = await getMediaPage({
            "pageNo": 1,
            "pageSize": 8,
            "contentTypeId": data.id,
            "mediaType": "image"
        })
        console.log(res);
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime)

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    } else if (title.value == '请选择视频资源') {
        const res = await getMediaPage({
            "pageNo": 1,
            "pageSize": 8,
            "contentTypeId": data.id,
            "mediaType": "video"
        })
        console.log(res);
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    }
}
// 分页
async function handleCurrentChange(val: number) {
    if (allorSomePicture.value == 'some') {
        if (title.value == '请选择图片资源' || title.value == '请选择封面图片') {
            const res = await getMediaPage({
                "pageNo": val,
                "pageSize": 8,
                "contentTypeId": allorSomeData.value.id,
                "mediaType": "image"
            })
            console.log(res);
            imageList.value = res.data.list
            totals = Number(res.data.total)
            for (let i = 0; i < imageList.value.length; i++) {
                // 将时间戳转换为Date对象
                const date = new Date(imageList.value[i].createTime)

                // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
                const year = date.getFullYear(); // 获取四位数的年份
                const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
                const day = date.getDate().toString().padStart(2, '0'); // 获取日

                // 组合成YYYY-MM-DD格式
                const formattedDate = `${year}-${month}-${day}`;
                imageList.value[i].createTime = formattedDate
            }
        } else if (title.value == '请选择视频资源') {
            const res = await getMediaPage({
                "pageNo": val,
                "pageSize": 8,
                "contentTypeId": allorSomeData.value.id,
                "mediaType": "video"
            })
            console.log(res);
            imageList.value = res.data.list
            totals.value = Number(res.data.total)
            for (let i = 0; i < imageList.value.length; i++) {
                // 将时间戳转换为Date对象
                const date = new Date(imageList.value[i].createTime);

                // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
                const year = date.getFullYear(); // 获取四位数的年份
                const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
                const day = date.getDate().toString().padStart(2, '0'); // 获取日

                // 组合成YYYY-MM-DD格式
                const formattedDate = `${year}-${month}-${day}`;
                imageList.value[i].createTime = formattedDate
            }
        }
    } else {
        try {
            if (title.value == '请选择图片资源' || title.value == '请选择封面图片') {
                const res = await getMediaPage({
                    "pageNo": val,
                    "pageSize": 8,
                    "mediaType": "image"
                })
                imageList.value = res.data.list
            } else if (title.value == '请选择视频资源') {
                const res = await getMediaPage({
                    "pageNo": val,
                    "pageSize": 8,
                    "mediaType": "video"
                })
                imageList.value = res.data.list
            }
        } finally {
            for (let i = 0; i < imageList.value.length; i++) {
                // 将时间戳转换为Date对象
                const date = new Date(imageList.value[i].createTime);

                // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
                const year = date.getFullYear(); // 获取四位数的年份
                const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
                const day = date.getDate().toString().padStart(2, '0'); // 获取日

                // 组合成YYYY-MM-DD格式
                const formattedDate = `${year}-${month}-${day}`;
                imageList.value[i].createTime = formattedDate
            }
        }
    }
}
// 点击眼睛图标，查看具体信息
function toView(item) {
    console.log(item.description)
    dialogFormVisible3.value = true
    Viewdata.description = item.description
    Viewdata.photographerName = item.photographerName
    Viewdata.createTime = item.createTime
    Viewdata.mediaType = item.mediaType

}
// 选择图片添加到数组中
function checkeid(item) {
    // compile是用来判断是不是点的编辑按钮，所以当请求发送完成后需要清除他
    if (compile.value === '3') {
        selectedResources.value.push(item)
        mediaIdsList.value.push(item.id)
        dialogFormVisible.value = false
    } else if (compile.value === '2') {
        selectedResources.value.push(item)
        mediaIdsList.value.push(item.id)
        dialogFormVisible.value = false
    } else if (compile.value === '1') {
        imageSrc.value = item.fileUrl
        ElMessage.success('头像添加成功')
        dialogFormVisible.value = false
    }
}
// 判断数据类型的方法
function componentForType(mediaType) {
    switch (mediaType) {
        case 'image/jpeg':
        case 'image/png':
            return MyImageComponent;
        case 'video/mp4':
            return MyVideoComponent;
        case 'text/plain':
            return MyTextComponent;
        default:
            // 如果类型不匹配，可以返回一个默认组件或者null
            return null;
    }
}
async function textProps(addType) {
    dialogFormVisible1.value = true;
    const res = await getpicturecalssList();
    ClassList = res.data;

    // 根据 addType 的值筛选 ClassList，并设置 options
    if (addType === '1') {
        // 假设 '1' 表示图片类型
        options.value = ClassList.filter(item => item.type === 0).map(item => ({
            value: item.id,
            label: item.name
        }));
    } else if (addType === '2') {
        // 假设 '2' 表示视频类型
        options.value = ClassList.filter(item => item.type === 1).map(item => ({
            value: item.id,
            label: item.name
        }));
    } else if (addType === '3') {
        options.value = ClassList.map(item => ({
            value: item.id,
            label: item.name
        }));
    }
}
// 选择器切换选项
function optionsChange(e) {
    form.albumTypeId = e
}
function CameramanChange(e) {
    form.authors = e
}
// 获取摄影师名单
async function getPhotoPage() {
    const res = await PhotoPage({
        "pageNo": 1,
        "pageSize": 100
    })
    CameramanList.value = res.data.list
    options1.value = CameramanList.value.map(item => {
        return {
            value: item.id,
            label: item.name
        }
    })
}
function startUsing(e) {
    form.enable = e
}
// 点击保存相册的提交按钮
async function submitChange() {
    formRef.value.validate(async (valid) => {
        if (valid) {
            if (Orupdate.value == 'add') {
                form.authors.forEach(name => {
                    const match = CameramanList.value.find(item => item.name === name)
                    if (match) {
                        addImageId.value.push(match.id)
                    }
                    console.log(addImageId.value);
                })
                // 用相册类型，匹配数组的id
                console.log(form.albumTypeId);

                const arr1 = leixing.value.find(item => item.name == form.albumTypeId)
                console.log('1', arr1);

                lexingid.value = arr1.id
                const res = await establishPicture({
                    "title": form.title,
                    "albumTypeId": lexingid.value,
                    "coverUrl": imageSrc.value,
                    "authors": form.authors,
                    "description": form.description,
                    "enable": form.enable,
                    "recommend": form.recommend,
                    "banner": form.banner,
                    "content": JSON.stringify(selectedResources.value),
                    "mediaIds": mediaIdsList.value
                })
                if (res.code == 0) {
                    ElMessage.success('创建相册成功')
                    dialogFormVisible5.value = false
                    SearchImage()
                } else {
                    ElMessage.error(res.msg)
                }
                dialogFormVisible1.value = false
            } else if (Orupdate.value == 'update') {
                form.authors.forEach(name => {
                    const match = CameramanList.value.find(item => item.name === name)
                    if (match) {
                        addImageId.value.push(match.id)
                    }
                    console.log(addImageId.value);
                })
                // const arr1 = leixing.value.find(item => item.name === form.albumTypeId)
                // console.log(arr1);

                // lexingid.value = arr1.id
                if (updateTitle.value === form.title) {
                    const res = await updatePicture({
                        "id": AddalbumTypeId.value,
                        // "albumTypeId": form.albumTypeId,
                        "albumTypeId": form.albumTypeId,
                        "coverUrl": imageSrc.value,
                        "authors": addImageId.value,
                        "description": form.description,
                        "enable": form.enable,
                        "recommend": form.recommend,
                        "banner": form.banner,
                        "content": JSON.stringify(selectedResources.value),
                        "mediaIds": mediaIdsList.value
                    })
                    if (res.code == 0) {
                        ElMessage.success('修改相册成功')
                        dialogFormVisible5.value = false
                        SearchImage()
                    } else {
                        ElMessage.error(res.msg)
                    }
                    dialogFormVisible1.value = false
                } else {
                    const res = await updatePicture({
                        "id": AddalbumTypeId.value,
                        "title": form.title,
                        "albumTypeId": form.albumTypeId,
                        "coverUrl": imageSrc.value,
                        "authors": addImageId.value,
                        "description": form.description,
                        "enable": form.enable,
                        "recommend": form.recommend,
                        "banner": form.banner,
                        "content": JSON.stringify(selectedResources.value)
                    })
                    if (res.code == 0) {
                        ElMessage.success('修改相册成功')
                        dialogFormVisible5.value = false
                        getPhotoPage()
                    } else {
                        ElMessage.error(res.msg)
                    }
                    dialogFormVisible1.value = false
                }
            }

        } else {
            ElMessage.error('表单校验失败')
            return false
        }
    })
}
function recommended(e) {
    form.recommend = e
}
function slideshow(e) {
    form.banner = e
}
// 点击添加文本按钮
function selectText() {
    dialogFormVisible2.value = true;
    Textmian.title = ''; // 重置文本标题
    Textmian.textmian = ''; // 重置文本内容
    Text = {}; // 重置 Text 对象，以避免在数组中保留旧数据
}
// 添加文本的提交按钮点击事件
function submitText() {
    if (!isSubmitDisabled.value) {
        // 确保 Text 对象包含新的文本数据
        Text.title = Textmian.title;
        Text.textmian = Textmian.textmian;
        Text.mediaType = 'text/plain';
        // 将新的文本对象添加到 selectedResources 数组
        selectedResources.value.push(Text);

        // 关闭对话框
        dialogFormVisible2.value = false;
        ElMessage.success('添加文本成功')
    }
    // 不要在这里清空 selectedResources 数组
}
function unsubmitText() {
    dialogFormVisible2.value = false
}
async function opendialogimg(item) {
    mediaIdsList.value = []
    Orupdate.value = 'add'
    title3.value = '新建图片相册'
    dialogFormVisible5.value = true
    selectedResources.value = []
    form.title = ''
    form.albumTypeId = item.name
    form.description = ''
    form.banner = ''
    form.authors = []
    form.enable = ''
    form.recommend = ''
    await textProps('1')
}
async function opendialogvideo(item) {
    mediaIdsList.value = []
    Orupdate.value = 'add'
    title3.value = '新建相册'
    dialogFormVisible5.value = true
    selectedResources.value = []
    form.title = ''
    form.albumTypeId = item.name
    form.description = ''
    form.banner = ''
    form.authors = []
    form.enable = ''
    form.recommend = ''
    await textProps('2')
}

// 搜索
async function SearchImage() {
    const res = await pictureClass({
        "pageNo": 1,
        "pageSize": 6,
        "title": SearchName.value
    })
    imageList1.value = res.data.list
    totals1.value = Number(res.data.total)
}
function removeElement(item) {

    const id = item.id
    // 检查索引是否在数组的有效范围内
    if (selectedResources.value.some(item => item.id === id)) {
        // 找到要删除元素的索引
        const index = selectedResources.value.findIndex(item => item.id === id);
        if (index !== -1) {
            // 删除元素
            selectedResources.value.splice(index, 1);
        } else {
            console.error('未找到元素，无法删除');
        }
    } else {
        console.error('元素不在数组中');
    }
    const mediaIndex = mediaIdsList.value.findIndex(idItem => idItem === id);
    if (mediaIndex !== -1) {
        mediaIdsList.value.splice(mediaIndex, 1);
    } else {
        console.error('在 mediaIdsList 中未找到元素，无法删除');
    }
}


// 切换相册
// async function PictureAlbum(event){
//     imageList1.value = []
//     totals1.value = null
//     if(event.name === "allpage"){
//         const res = await pictureClass({
//         "pageNo": 1,
//         "pageSize": 6,  
//     })
//     imageList1.value = res.data.list
//     totals1.value = Number(res.data.total)
//     }else if(event.name === "picture"){
//         const res = await pictureClass({
//         "pageNo": 1,
//         "pageSize": 6,
//         "albumTypeId": dataImageList.value[0].id
//     })
//     imageList1.value = res.data.list
//     totals1.value = Number(res.data.total)
//     }else if(event.name === "video"){
//         const res = await pictureClass({
//         "pageNo": 1,
//         "pageSize": 6,
//         "albumTypeId": dataVideoList.value[0].id
//     })
//     imageList1.value = res.data.list
//     totals1.value = Number(res.data.total)
//     }
// }
// 每一项的点击事件
async function getpictureClasss(item) {
    paging.value = item.id
    totals1.value = null
    everyclick.value = 'true'
    const res = await pictureClass({
        "pageNo": 1,
        "pageSize": 6,
        "albumTypeId": item.id
    })
    imageList1.value = res.data.list
    totals1.value = Number(res.data.total)
}

// 分页
async function handleCurrentChange1(val) {
    const res = await pictureClass({
        "pageNo": val,
        "pageSize": 6,
        "albumTypeId": paging.value
    })
    imageList1.value = res.data.list
    totals1.value = Number(res.data.total)
}
</script>
<template>
    <div>
        <div class="search">
            请输入相册名称
            <el-input v-model="SearchName" style="width: 60%;height: 40px;margin-left: 10px"></el-input>
            <el-button type="primary" style="margin-left: 20px;" @click="SearchImage">搜索</el-button>
        </div>
        <div class="mian">
            <div class="tree">
                <div style="margin-left: 10px;">
                    <el-tabs v-model="activeName">
                        <!-- <el-tab-pane label="全部相册" style="margin-left: 50px;" name="allpage">
                        </el-tab-pane> -->
                        <el-tab-pane label="图片相册分类" style="margin-left: 50px;" name="picture">
                            <el-button type="primary" @click="addClassImage">添加图片相册分类</el-button>
                            <div v-for="(item, index) in dataImageList" :key=index @click="getpictureClasss(item)"
                                style="margin-top: 20px;border-bottom: 1px solid #89CFF0;padding: 5px 5px;display: flex;justify-content: space-between;">
                                <div>
                                    {{ item.name }}
                                </div>
                                <div style="cursor: pointer;">
                                    <el-tooltip content="添加相册">
                                        <el-icon @click="opendialogimg(item)">
                                            <Plus />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-tooltip content="删除相册">
                                        <el-icon style="margin-left: 20px;margin-right: 20px"
                                            @click="deleteClass(item)">
                                            <DeleteFilled />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-tooltip content="修改相册">
                                        <el-icon style="margin-right: 10px;" @click="uploudeClass(item)">
                                            <MoreFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="视频相册分类" style="margin-left: 50px;" name="video">
                            <el-button type="primary" @click="addClassVideo">添加视频相册分类</el-button>
                            <div v-for="(item, index) in dataVideoList" :key=index @click="getpictureClasss(item)"
                                style="margin-top: 20px;border-bottom: 1px solid #89CFF0;padding: 5px 5px;display: flex;justify-content: space-between;">
                                <div>
                                    {{ item.name }}
                                </div>
                                <div style="cursor: pointer;">
                                    <el-tooltip content="添加相册">
                                        <el-icon @click="opendialogvideo(item)">
                                            <Plus />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-tooltip content="删除相册">
                                        <el-icon style="margin-left: 20px;margin-right: 20px"
                                            @click="deleteClass(item)">
                                            <DeleteFilled />
                                        </el-icon>
                                    </el-tooltip>
                                    <el-tooltip content="修改相册">
                                        <el-icon style="margin-right: 10px;" @click="uploudeClass(item)">
                                            <MoreFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <el-dialog v-model="dialogFormVisible5" :title="title3" width="1600" destroy-on-close>
                    <div class="main1">
                        <div class="left">
                            <span style="font-weight: 700;font-size: 20px;margin-left: 40%">相册信息</span>
                            <div style="border: 1px solid #409eff;height: 650px;margin-top: 10px;height: 100%;">
                                <el-form :model="form" :rules="rules" ref="formRef" style="margin: 10px 10px;">
                                    <el-form-item label="相册名称" label-width="85px" prop="title">
                                        <el-input v-model="form.title" placeholder="请输入相册名称" autocomplete="off" />
                                    </el-form-item>
                                    <el-form-item label="相册类型" label-width="85px" prop="albumTypeId">
                                        <el-select v-model="form.albumTypeId" placeholder="请选择相册类型" size="large"
                                            style="width: 240px" filterable @change="optionsChange">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item required label="封面图片" label-width="85px">
                                        <el-button class="coverImage" type="primary"
                                            @click="getcompile">选择封面图</el-button>
                                    </el-form-item>
                                    <!-- 修改的话尝试定义form.authors也就是他绑定的值。在他绑定的值里面去做判断看这样能不能显示修改的作者姓名 -->
                                    <el-form-item label="作者姓名" label-width="85px" prop="authors">
                                        <el-select v-model="form.authors" placeholder="请选择作者姓名" size="large"
                                            style="width: 240px" multiple @change="CameramanChange">
                                            <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="相册描述" label-width="85px" prop="description">
                                        <el-input v-model="form.description" placeholder="请输入相册描述" autocomplete="off" />
                                    </el-form-item>
                                    <el-form-item label="是否启用" label-width="85px" prop="enable">
                                        <el-select v-model="form.enable" placeholder="请选择是否启用" size="large"
                                            style="width: 240px" @change="startUsing">
                                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="是否推荐" label-width="85px" prop="recommend">
                                        <el-select v-model="form.recommend" placeholder="请选择是否推荐" size="large"
                                            style="width: 240px" @change="recommended">
                                            <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="是否轮播" label-width="85px" prop="banner">
                                        <el-select v-model="form.banner" placeholder="请选择是否轮播" size="large"
                                            style="width: 240px" @change="slideshow">
                                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="right">
                            <div style="margin-top: -90px;">
                                <div
                                    style="font-weight: 700;font-size: 20px;margin-left:105%;margin-top: -50px;display:inline;white-space: nowrap;">
                                    相册预览
                                </div>
                                <div class="preview">
                                    <div class="imgbox1">
                                        <div v-for="(item, index) in selectedResources" :key="index"
                                            class="componentbox">
                                            <div class="deletebox" @click="removeElement(item)">
                                                <el-icon size="25px">
                                                    <CircleCloseFilled />
                                                </el-icon>
                                            </div>
                                            <!-- 根据资源类型动态渲染组件 -->
                                            <component :is="componentForType(item.mediaType)" :mediaData="item" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top: 30px;display: flex;">
                                <div class="resource">
                                    <div class="card" style="margin-top: 20px;display: flex;flex-direction: column;">
                                        <el-button size="large" type="primary" @click="selectImage"
                                            style="width: 140px;margin-left: 10px;">添加图片</el-button>
                                    </div>
                                    <div class="card" style="margin-top: 20px;display: flex;flex-direction: column;">
                                        <el-button size="large" type="primary" @click="selectVideo"
                                            style=" width: 140px;margin-left: 10px;">添加视频</el-button>
                                    </div>
                                    <div class="card" style="margin-top: 20px;display: flex;flex-direction: column;">
                                        <el-button size="large" type="primary" @click="selectText"
                                            style=" width: 140px; margin-left: 10px;">添加文本</el-button>
                                    </div>
                                    <div class="dialog-footer">
                                        <el-button type="primary" size="large" @click="submitChange"
                                            style="width: 140px;">
                                            提交
                                        </el-button>
                                    </div>
                                    <el-dialog v-model="dialogFormVisible" :title="title" width="1500" destroy-on-close>
                                        <div class="tree1">
                                            <el-tree
                                                style="max-width: 100%;width: 130px;border-right: 1px solid #ebebeb;"
                                                :data="treeList" accordion @node-click="handleNodeClick"
                                                :default-current-page="allorSomePage">
                                            </el-tree>
                                            <div class="image">
                                                <div class="box1" v-for="(item, index) in imageList " :key="index">
                                                    <el-card style="padding-top: 0px;">
                                                        <span class="span1">
                                                            <el-icon style="color: black;margin-left: 50px;"
                                                                @click="toView(item)">
                                                                <View />
                                                            </el-icon>
                                                            <el-checkbox class="check" v-model="item.id" label=""
                                                                size="large" @click="checkeid(item)" />
                                                        </span>
                                                        <img class="img1" :src=item.fileUrl alt=""
                                                            v-if="item.mediaType == 'image/jpeg'"
                                                            @click="checkeid(item)">
                                                        <video class="img1" :src=item.fileUrl alt=""
                                                            v-if="item.mediaType == 'video/mp4'" controls
                                                            @click="checkeid(item)"></video>
                                                        </img>
                                                    </el-card>
                                                </div>
                                                <div class="example-pagination-block">
                                                    <el-pagination layout="prev, pager, next" :total='totals'
                                                        :page-size='8' :hide-on-single-page="value"
                                                        @size-change="handleSizeChange"
                                                        @current-change="handleCurrentChange" />
                                                </div>
                                            </div>
                                        </div>
                                    </el-dialog>
                                    <el-dialog v-model="dialogFormVisible3" title="资源详情" width="500" destroy-on-close>
                                        <div class="message1">
                                            文件描述:"{{ Viewdata.description }}"
                                        </div>
                                        <div class="message1">
                                            摄影师姓名:{{ Viewdata.photographerName }}
                                        </div>
                                        <div class="message1">
                                            创建时间:{{ Viewdata.createTime }}
                                        </div>
                                        <div class="message1">
                                            资源类型:{{ Viewdata.mediaType == "video/mp4" ? '视频' : "image/jpeg" ? '图片' :
                '其他类型'
                                            }}
                                        </div>
                                    </el-dialog>
                                    <el-dialog v-model="dialogFormVisible2" title="添加文本" width="500" ref="ruleFormRef"
                                        destroy-on-close>
                                        <el-form :model="Textmian" :rules="rules1">
                                            <el-form-item label="文本标题" label-width="auto" prop="title">
                                                <el-input v-model="Textmian.title" placeholder="请输入文本标题"
                                                    autocomplete="off" />
                                            </el-form-item>
                                            <el-form-item label="文本内容" label-width="auto" prop="textmian">
                                                <el-input v-model="Textmian.textmian" placeholder="请输入文本内容(最多200字)"
                                                    autocomplete="off" type="textarea" autosize maxlength="100" />
                                            </el-form-item>
                                        </el-form>
                                        <template #footer>
                                            <div class="dialog-footer">
                                                <el-button @click="unsubmitText">取消</el-button>
                                                <el-button type="primary" @click="submitText"
                                                    :disabled="isSubmitDisabled.value">
                                                    提交
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-dialog>
                <el-dialog v-model="dialogFormVisible4" :title="title1" width="500" @before-close="resetForm"
                    destroy-on-close>
                    <el-form :model="formdata" :rules="rules2" ref="formRef" :inline="true">
                        <el-form-item label="相册分类名称" label-width="140px" prop="name">
                            <el-input v-model="formdata.name" placeholder="请输入相册分类名称" />
                        </el-form-item>
                        <el-form-item label="相册类型中的排序" label-width="140px" prop="sort">
                            <el-input v-model.number="formdata.sort" placeholder="请输入排序号(数字越大排列越前,示例:1)" />
                        </el-form-item>
                        <el-form-item label="是否启用" label-width="140px" prop="enable">
                            <el-select v-model="formdata.enable" placeholder="是否启用" style="width: 240px">
                                <el-option v-for="item in options5" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="媒体类型" label-width="140px" prop="type">
                            <el-select v-model="formdata.type" placeholder="请选择媒体类型" style="width: 240px"
                                :disabled="mediumType">
                                <el-option v-for="item in options6" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="cancel">取消</el-button>
                            <el-button type="primary" @click="addclassify">
                                提交
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </div>
            <div class="picture">
                <div class="Dialogimgbox">
                    <div class="box" v-for="(item, index) in  imageList1 " :key="index">
                        <el-card style="height: auto;">
                            <div style="margin-top: -22px;margin-bottom: 0px;margin-left: 15%">
                                <el-icon style="color: black;margin-left: 50px;" @click="toParticulars(item)">
                                    <More />
                                </el-icon>
                                <el-icon style="color: black;margin-left: 50px;" @click="toDeleteFilled(item)">
                                    <DeleteFilled />
                                </el-icon>
                            </div>
                            <img class="img" :src=item.coverUrl alt="">
                            </img>
                            <span class="span">{{ item.title }}</span>
                        </el-card>
                    </div>
                </div>
                <div style="width: 100%; height: 50px;">
                    <div class="example-pagination-block">
                        <el-pagination layout="prev, pager, next" :total='totals1' :page-size='6'
                            @size-change="handleSizeChange" @current-change="handleCurrentChange1" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.demo-date-picker {
    display: flex;
    justify-content: space-around;
    background-color: #f0f0f0;
}

.search {
    display: flex;
    width: 100%;
    height: 60px;
    margin-top: -10px;
    align-items: center;
    margin-left: 10px;
}

.iconbox {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 40px;
    /* 鼠标进入盒子后变成小手形状 */
}



.resource {
    margin-right: 5%;
    align-items: center;
}

/* .center {
    margin-top: 80px;
    width: ;
} */

.preview {
    width: 400px;
    height: 700px;
    background-color: #f6f6f9;
    background: url(https://admin-b2b2c.pickmall.cn/img/iPhoneX_model.8fa6694c.png) no-repeat;
    background-size: contain;
    padding: 20px 13px;
    margin-top: 10px;
    margin-left: 70%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.imgbox1 {
    width: 90%;
    /* 让 .imgbox 宽度充满 .left 盒子 */
    height: calc(100% - 40px);
    /* 减去左右两侧的内边距，确保滚动时可见 */
    overflow-y: auto;
    /* 允许垂直滚动 */
    scrollbar-width: none;
    margin-top: 20px
}

.componentbox {
    width: 96%;
    position: relative;
}

.componentbox:hover {
    border: 3px solid #409eff;
}

.componentbox:hover .deletebox {
    display: flex;
}

.deletebox {
    display: none;
    color: red;
    position: absolute;
    /* 添加绝对定位 */
    top: 5px;
    /* 根据需要调整位置 */
    right: 5px;
    /* 根据需要调整位置 */
    z-index: 10;
    /* 设置较高的 z-index 值 */
}

.Classbox {
    width: 95%;
    background-color: #c3e7ff;
    margin: 5px 5px;
    height: auto;
    font-size: 16px;
    padding: 5px 5px;
    border-radius: 5% 5% 5% 5%;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
}


.mian {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.tree {
    height: 95%;
    width: auto;
}

.picture {
    flex: 1;
    height: 95%;
}


.span {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    /* 保持文本在一行显示 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
}

.Dialogimgbox {
    flex: 1;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
    margin: 0px 100px;
    height: 700px;
    background-color: #ebebeb;
}

.box {
    display: inline-block;
    position: relative;
    margin: 10px 40px 10px 10px;
    width: 300px;
    overflow: hidden;
    height: 300px;
    border: 3px solid transparent;
    /* 添加透明边框以便于显示 hover 效果 */
    transition: border 0.3s;
}

.box:hover {
    border: 2px solid #409eff;
}

.img {
    display: block;

    width: 250px;
    /* 使图片宽度适应盒子宽度 */
    height: 200px;
    /* 使图片高度适应盒子高度 */
    object-fit: cover;
}

.example-pagination-block {
    margin-left: 80%;
    height: auto;
    padding-bottom: 10px;
}



/* 本来 */

.main1 {
    display: flex;
    justify-content: space-between;
    width: 1570px;
    height: 750px;
}

.img1 {
    padding-top: -10px;
    display: block;
    width: 100%;
    /* 使图片宽度适应盒子宽度 */
    height: 100%;
    /* 使图片高度适应盒子高度 */
    object-fit: cover;
}


.check {
    display: flex;
    margin-top: -10px;
}

.span1 {
    display: flex;
    margin-top: -22px;
    justify-content: space-between;
}


.box1 {
    display: inline-block;
    position: relative;
    margin: 10px 0px 10px 10px;
    position: relative;
    width: 300px;
    overflow: hidden;
    height: 300px;
}

.image {
    width: 1445px;
    height: 740px;
}

.right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    width: 600px;
    height: 750px;
    padding: 50px 13px;
    margin: 0px 10px;
    border: 1px solid #79bbff;
}

.left {
    width: 400px;
    height: 750px;
    margin-top: -40px;
    margin-left: 100px;
}

.tree1 {
    display: flex;
    justify-content: space-between;
}

.card {
    height: 30%;
    margin-top: 20px;
    width: 300px;
    height: 130px;
}

.dialog-footer {
    margin-top: 50px;
    margin-left: 3%;
}

@media screen and (max-width: 900px) {
    .main1 {
        display: flex;
        justify-content: space-between;
        width: 785px;
        height: 700px;
    }

    .left {
        width: 200px;
        height: 100%;
        margin-top: -40px;
        margin-left: 50px;
    }


    .preview {
        width: 300px;
        height: 700px;
        background-color: #f6f6f9;
        background: url(https://admin-b2b2c.pickmall.cn/img/iPhoneX_model.8fa6694c.png) no-repeat;
        background-size: contain;
        padding: 20px 13px;
        margin-top: -20px;
        margin-left: 10%;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        width: 600px;
        height: 100%;
        padding: 50px 13px;
        margin: 0px 10px;
        border: 1px solid #79bbff;
    }

    .resource {
        margin-top: -50px;
        margin-right: 5%;
        margin-left: 20px;
    }

    .dialog-footer {
        margin-bottom: 10px;
        margin-left: 10%;
    }
}
</style>